<template>
   <el-button type="primary"  @click="handeleAdd(0)">新增</el-button>
  <el-table :data="tableData" style="width: 100%;height: 100%;">
    <el-table-column type="index" width="80" label="序号"/>
    <el-table-column prop="user" label="账号名称" />

    <el-table-column prop="type" label="账号类型">
      <template v-slot="scope">
       {{ scope.row.type==1?'管理员':'店铺' }}
      </template>
    </el-table-column>
    <el-table-column prop="shop" label="店铺名称" />
    <el-table-column prop="ordercount" label="订单数量" />
    <el-table-column prop="sellingprice" label="销售额" />
    <el-table-column prop="name" label="采购成本" />
    <el-table-column prop="freight" label="运费" />
    <el-table-column prop="profit" label="利润" />
    <el-table-column prop="profitmargin" label="利润率" />
    <el-table-column prop="logintime" label="登录时间" />
    <el-table-column prop="logincount" label="店铺订单统计" />
    <el-table-column fixed="right" label="操作" width="100">
      <template v-slot="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)" v-if="scope.row.shop!=''">删除</el-button>
        <el-button link type="primary" size="small" @click="handeleAdd(1,scope.row)" v-if="scope.row.shop!=''">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div> -->

  <!-- 新增 -->
  <el-dialog v-model="dialogFormVisible" :title="title" style="width: 500px;">
    <el-form :model="form">
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="form.user" autocomplete="off" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"  placeholder="请输入密码"/>
       
      </el-form-item>
      <el-form-item label="" :label-width="formLabelWidth">
        <el-checkbox-group v-model="shop">
          <el-checkbox v-for="city in tableDataList" :label="city.name" :key="city.id">{{city.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogFormVisibleAdd(form)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {getLogin,getOrder,getShop} from '@/api/service'
import { ElMessage } from 'element-plus'
import { ref ,reactive,onMounted } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const tableDataList = ref([
{
  id:'',
  name:'',
}
])
const dialogFormVisible = ref(false)
const title = ref('新增')
const formLabelWidth = '140px'
// 删除
const handleClick = (row:any) => {
  // console.log('click')
  let data = {
    type:'delete',
    user:row.user
  }
  getLogin(data).then((res:any)=>{
    console.log(res)
    if(res.code==1)  {
      ElMessage({
      message: res.msg,
      type: 'success',
    })
      getLoginQuery()
      return
    }
 
    ElMessage({
      message: res.msg,
      type: 'warning',
    })
  })
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const form = reactive({
  user: '',
  password: '',
  
})
const shop=ref([])

// 表格数据
const tableData = ref([])
 onMounted(()=>{
  getLoginQuery();
  getShopQuery();
})
const getShopQuery = ()=>{
  let data = {
    type:'query',
  }
  getShop(data).then((res:any)=>{
    console.log(res)
    if(res.code==1) return tableDataList.value = res.list
 
    ElMessage({
      message: res.msg,
      type: 'warning',
    })
  })
}
const getLoginQuery = ()=>{
  let data = {
    type:'query',
  }
  getLogin(data).then((res:any)=>{
    console.log(res)
    if(res.code==1) return tableData.value = res.list
 
    ElMessage({
      message: res.msg,
      type: 'warning',
    })
  })
}
// 弹窗
const handeleAdd =(index:any,row?:any)=>{
  dialogFormVisible.value = true;
  title.value = index == 0?'新增':'修改'
  console.log(title.value)
  if(index == 1) {
    Object.assign(form, row)
  }
  // if(index == 1) {
  //   dialogFormVisibleAdd(form)
  // }
}
// 新增
const dialogFormVisibleAdd = (ruleForm:any)=>{
  let data = {
    type:title.value=='新增'?'add':'update',
    user:ruleForm.user,
    pass:ruleForm.password,
    shop:shop.value.join(',')
  }
  getLogin(data).then((res:any)=>{
    console.log(res)
    if(res.code==1)  {
      tableData.value = res.list;
      dialogFormVisible.value = false;
      getLoginQuery()
      return
    }
 
    ElMessage({
      message: res.msg,
      type: 'warning',
    })
  })
}
</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>